const Dialog = ({title,children,onClose,onCancel,onSubmit,show}) => {
  return (
    <div className="modal" tabIndex={-1} style={{display:show ? 'block' : 'none'}}>
      <div className="modal-dialog">
        <div className="modal-content">
          <div className="modal-header">
            <h5 className="modal-title">Modal title</h5>

            
            <button
              type="button"
              className="btn-close"
              data-dismiss="modal"
              aria-label="Close"
              onClick={onClose}
            >
              {/* <span aria-hidden="true"></span> */}
            </button>
          </div>
          <div className="modal-body">
            {children}
          </div>
          <div className="modal-footer">
            <button
              type="button"
              className="btn btn-secondary"
              data-dismiss="modal"
              onClick={onCancel}
            >
              Close
            </button>
            <button type="button" className="btn btn-primary" onClick={onSubmit}>
              Save changes
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Dialog;
